<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>xiaxuchen的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="Vue + Webpack的简单学习一、WebPack新建工程 使用命令创建工程 12345npm init  &#x2F;&#x2F; 初始化为npm工程,这样就有了包管理npm i webpack vue vue-loader &#x2F;&#x2F; 安装webpack和vue的依赖&#x2F;&#x2F; 发现警告 npm WARN vue-loader@15.8.3 requires a peer of css-loader@* but none">
<meta property="og:type" content="article">
<meta property="og:title" content="xiaxuchen的博客">
<meta property="og:url" content="http://yoursite.com/2020/08/07/%E5%89%8D%E7%AB%AF/vue%20+%20webpack%E7%AE%80%E5%8D%95%E5%AD%A6%E4%B9%A0/index.html">
<meta property="og:site_name" content="xiaxuchen的博客">
<meta property="og:description" content="Vue + Webpack的简单学习一、WebPack新建工程 使用命令创建工程 12345npm init  &#x2F;&#x2F; 初始化为npm工程,这样就有了包管理npm i webpack vue vue-loader &#x2F;&#x2F; 安装webpack和vue的依赖&#x2F;&#x2F; 发现警告 npm WARN vue-loader@15.8.3 requires a peer of css-loader@* but none">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-08-07T15:08:02.739Z">
<meta property="article:modified_time" content="2020-07-19T10:36:53.963Z">
<meta property="article:author" content="xiaxuchen">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="./atom.xml" title="xiaxuchen的博客" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="./css/style.css">

<meta name="generator" content="Hexo 5.0.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="./" id="logo">xiaxuchen的博客</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="./">Home</a>
        
          <a class="main-nav-link" href="./archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="./atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-前端/vue + webpack简单学习" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="./2020/08/07/%E5%89%8D%E7%AB%AF/vue%20+%20webpack%E7%AE%80%E5%8D%95%E5%AD%A6%E4%B9%A0/" class="article-date">
  <time datetime="2020-08-07T15:08:02.739Z" itemprop="datePublished">2020-08-07</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="Vue-Webpack的简单学习"><a href="#Vue-Webpack的简单学习" class="headerlink" title="Vue + Webpack的简单学习"></a>Vue + Webpack的简单学习</h2><h3 id="一、WebPack新建工程"><a href="#一、WebPack新建工程" class="headerlink" title="一、WebPack新建工程"></a>一、WebPack新建工程</h3><ol>
<li><p>使用命令创建工程</p>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm init  // 初始化为npm工程,这样就有了包管理</span><br><span class="line">npm i webpack vue vue-loader // 安装webpack和vue的依赖</span><br><span class="line">// 发现警告 npm WARN vue-loader@<span class="number">15</span>.<span class="number">8</span>.<span class="number">3</span> requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.</span><br><span class="line">// 按要求安装依赖</span><br><span class="line">npm i css-loader</span><br></pre></td></tr></table></figure>



</li>
</ol>
<ol start="2">
<li><p>在根路径创建webpack.config.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>) <span class="comment">// nodejs基础包，用于处理路径，如拼接</span></span><br><span class="line"><span class="keyword">const</span> VueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>); <span class="comment">// 必须的插件，用于加载.vue文件格式</span></span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> isDev = process.env.NODE_ENV === <span class="string">&#x27;development&#x27;</span> <span class="comment">// 获取环境变量</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> config = &#123;</span><br><span class="line">    target: <span class="string">&#x27;web&#x27;</span>,</span><br><span class="line">    entry: path.join(__dirname, <span class="string">&#x27;src/main.js&#x27;</span>), <span class="comment">// 入口js，通过入口的内容以及他的依赖进行打包</span></span><br><span class="line">    output: &#123; <span class="comment">// 输出:入口打包的内容输出到哪里</span></span><br><span class="line">        filename: <span class="string">&#x27;bundle.js&#x27;</span>,</span><br><span class="line">        path: path.join(__dirname, <span class="string">&#x27;dist&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [&#123; <span class="comment">// 配置loader处理的文件类型，因为原本只支持.js类型，通过loader机制进行扩展，以支持更多类型</span></span><br><span class="line">                test: <span class="regexp">/\.vue$/</span>,</span><br><span class="line">                loader: <span class="string">&#x27;vue-loader&#x27;</span></span><br><span class="line">            &#125;, &#123;</span><br><span class="line">                test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">                use: [</span><br><span class="line">                    <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">                    <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                test: <span class="regexp">/\.styl$/</span>,</span><br><span class="line">                use: [</span><br><span class="line">                    <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">                    <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">                    <span class="string">&#x27;stylus-loader&#x27;</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;, &#123;</span><br><span class="line">                test: <span class="regexp">/\.(jpeg|png|jpg|svg|gif)$/</span>,</span><br><span class="line">                use: [&#123;</span><br><span class="line">                    loader: <span class="string">&#x27;url-loader&#x27;</span>, <span class="comment">// 将图片转换为base64直接放在js中，无需额外加载</span></span><br><span class="line">                    options: &#123; <span class="comment">//配置小于1024kb即可转换base64</span></span><br><span class="line">                        limit: <span class="number">1024</span>,</span><br><span class="line">                        name: <span class="string">&#x27;[name].[ext]&#x27;</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;]</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [ <span class="comment">// 插件</span></span><br><span class="line">        <span class="keyword">new</span> HtmlWebpackPlugin(),</span><br><span class="line">        <span class="keyword">new</span> VueLoaderPlugin(),</span><br><span class="line">        <span class="comment">// 将环境变量暴露到项目中，使得内容可以分模式编译</span></span><br><span class="line">        <span class="keyword">new</span> webpack.DefinePlugin(&#123;</span><br><span class="line">            <span class="string">&#x27;process.env&#x27;</span>: &#123;</span><br><span class="line">                NODE_ENV: isDev ? <span class="string">&#x27;&quot;development&quot;&#x27;</span> : <span class="string">&#x27;&quot;production&quot;&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果是开发环境则添加服务器配置</span></span><br><span class="line"><span class="keyword">if</span> (isDev) &#123;</span><br><span class="line">    <span class="comment">// 不直接使用编译后的代码，而是展示源码映射，方便调试</span></span><br><span class="line">    config.devTool = <span class="string">&#x27;#cheap-module-eval-source-map&#x27;</span></span><br><span class="line">    config.devServer = &#123;</span><br><span class="line">            port: <span class="number">8001</span>,</span><br><span class="line">            host: <span class="string">&#x27;0.0.0.0&#x27;</span>, <span class="comment">// 本机ip和127.0.0.1都可以访问</span></span><br><span class="line">            overlay: &#123;</span><br><span class="line">                errors: <span class="literal">true</span> <span class="comment">// 遇到错误都打印出来</span></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="comment">// 开启热更新</span></span><br><span class="line">            hot: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 添加热更新插件</span></span><br><span class="line">    config.plugins.push(</span><br><span class="line">        <span class="keyword">new</span> webpack.HotModuleReplacementPlugin()</span><br><span class="line">    )</span><br><span class="line">    config.plugins.push(</span><br><span class="line">        <span class="keyword">new</span> webpack.NoEmitOnErrorsPlugin()</span><br><span class="line">    )</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = config</span><br></pre></td></tr></table></figure>

<p>其中的main.js如下:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./app.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建绑定的元素</span></span><br><span class="line"><span class="keyword">const</span> root = <span class="built_in">document</span>.createElement(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line"><span class="built_in">document</span>.body.appendChild(root)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建vue对象并将内容进行渲染</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    render: <span class="function">(<span class="params">h</span>) =&gt;</span> h(App)</span><br><span class="line">&#125;).$mount(root)</span><br></pre></td></tr></table></figure>



</li>
</ol>
<ol start="3">
<li><p>webpack-dev-server</p>
<p>安装依赖</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i webpack-dev-server </span><br><span class="line">npm i cross-env &#x2F;&#x2F; 设置环境变量，因为在不同平台原本需要不同的命令，使用这个可以统一</span><br></pre></td></tr></table></figure>

<p>package.json配置运行命令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 使用cross-env 配置环境变量</span><br><span class="line">&quot;scripts&quot;: &#123;</span><br><span class="line">       &quot;build&quot;: &quot;cross-env NODE_ENV&#x3D;production webpack --config webpack.config.js&quot;,</span><br><span class="line">       &quot;dev&quot;: &quot;cross-env NODE_ENV&#x3D;development webpack-dev-server --config webpack.config.js&quot;</span><br><span class="line">   &#125;,</span><br></pre></td></tr></table></figure>

<p>配置webpack</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">const isDev &#x3D; process.env.NODE_ENV &#x3D;&#x3D;&#x3D; &#39;development&#39; &#x2F;&#x2F; 获取环境变量</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; const config &#x3D; ... 看上面的配置</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 如果是开发环境则添加服务器配置</span><br><span class="line">if (isDev) &#123;</span><br><span class="line">    &#x2F;&#x2F; 不直接使用编译后的代码，而是展示源码映射，方便调试</span><br><span class="line">    config.devTool &#x3D; &#39;#cheap-module-eval-source-map&#39;</span><br><span class="line">    config.devServer &#x3D; &#123;</span><br><span class="line">            port: 8001,</span><br><span class="line">            host: &#39;0.0.0.0&#39;, &#x2F;&#x2F; 本机ip和127.0.0.1都可以访问</span><br><span class="line">            overlay: &#123;</span><br><span class="line">                errors: true &#x2F;&#x2F; 遇到错误都打印出来</span><br><span class="line">            &#125;,</span><br><span class="line">            &#x2F;&#x2F; 开启热更新</span><br><span class="line">            hot: true</span><br><span class="line">        &#125;</span><br><span class="line">        &#x2F;&#x2F; 添加热更新插件</span><br><span class="line">    config.plugins.push(</span><br><span class="line">        new webpack.HotModuleReplacementPlugin()</span><br><span class="line">    )</span><br><span class="line">    config.plugins.push(</span><br><span class="line">        new webpack.NoEmitOnErrorsPlugin()</span><br><span class="line">    )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="4">
<li><p>额外的必须配置，babel、postcss</p>
<p>安装</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm i autoprefixer postcss-loader babel-core babel-loader &#x2F;&#x2F; postcss、babel依赖</span><br><span class="line">npm i babel-preset-env babel-plugin-transform-vue-jsx &#x2F;&#x2F; babel依赖</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>配置css后处理器,postcss.config.js</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">const autoprefixer &#x3D; require(&#39;autoprefixer&#39;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 自动优化处理css，比如各种浏览器的特性web-kit这种</span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">    plugins: [</span><br><span class="line">        autoprefixer()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>.babelrc</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;presets&quot;: [</span><br><span class="line">        &quot;env&quot;</span><br><span class="line">    ],</span><br><span class="line">    &quot;plugins&quot;: [</span><br><span class="line">        &quot;transform-vue-jsx&quot;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ol>
</li>
</ol>
<h3 id="二、-vue2"><a href="#二、-vue2" class="headerlink" title="二、 vue2"></a>二、 vue2</h3><ol>
<li><p>特点</p>
<p>数据绑定</p>
<p>vue文件</p>
<p>render方法(当组件变化重新执行render方法)</p>
<p>生命周期方法</p>
<p>computed(由于vue基于reactive，视图基于数据改变)</p>
</li>
<li><p>注意点</p>
<ul>
<li>数据在哪定义就在哪操作</li>
</ul>
</li>
</ol>
<h3 id="三、-css"><a href="#三、-css" class="headerlink" title="三、 css"></a>三、 css</h3><p>居中并铺满父元素:</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">position</span> absolute</span><br><span class="line">       <span class="attribute">top</span> <span class="number">0</span></span><br><span class="line">       <span class="attribute">bottom</span> <span class="number">0</span></span><br><span class="line">       <span class="attribute">left</span> <span class="number">0</span></span><br><span class="line">       <span class="attribute">right</span> <span class="number">0</span></span><br></pre></td></tr></table></figure>



<h3 id="四、-webpack打包优化"><a href="#四、-webpack打包优化" class="headerlink" title="四、 webpack打包优化"></a>四、 webpack打包优化</h3><p>将资源分离，便于缓存，如js、css文件，浏览器会进行缓存，减少带宽，生产环境的配置如下</p>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i extract-text-webpack-plugin -D</span><br></pre></td></tr></table></figure>



<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> ExtractPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 生产模式使用chunkhash</span></span><br><span class="line">   config.output.filename = <span class="string">&#x27;[name].[chunkhash:8].js&#x27;</span></span><br><span class="line">   <span class="comment">// 生产模式下用ExtractPlugin</span></span><br><span class="line">   config.module.rules.push(&#123;</span><br><span class="line">       test: <span class="regexp">/\.styl/</span>,</span><br><span class="line">       use: ExtractPlugin.extract(&#123;</span><br><span class="line">           <span class="comment">// style-loader会将css打包到js中，我们要分离，所以要这样子</span></span><br><span class="line">           fallback: <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">           use: [</span><br><span class="line">               <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">               <span class="comment">// 为stylus加上postcss处理器，同时当其他loader生成sourceMap后复用而不重新创建</span></span><br><span class="line">               &#123;</span><br><span class="line">                   loader: <span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">                   options: &#123;</span><br><span class="line">                       sourceMap: <span class="literal">true</span></span><br><span class="line">                   &#125;</span><br><span class="line">               &#125;,</span><br><span class="line">               <span class="string">&#x27;stylus-loader&#x27;</span></span><br><span class="line">           ]</span><br><span class="line">       &#125;)</span><br><span class="line">   &#125;)</span><br><span class="line">   config.plugins.push(</span><br><span class="line">       <span class="keyword">new</span> ExtractPlugin(<span class="string">&#x27;styles.[contentHash:8].css&#x27;</span>)</span><br><span class="line">   )</span><br></pre></td></tr></table></figure>

<p>由于框架的js代码比较稳定，故将代码单独分离打包，以便浏览器缓存</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 生产模式下，将框架的js代码单独出来，方便浏览器缓存</span></span><br><span class="line">   config.entry = &#123;</span><br><span class="line">       app: path.join(__dirname, <span class="string">&#x27;src/main.js&#x27;</span>),</span><br><span class="line">       vendor: [<span class="string">&#x27;vue&#x27;</span>]</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   config.optimization = &#123;</span><br><span class="line">       splitChunks: &#123;</span><br><span class="line">           cacheGroups: &#123;</span><br><span class="line">               commons: &#123;</span><br><span class="line">                   name: <span class="string">&quot;vendor&quot;</span></span><br><span class="line">               &#125;</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>

<p>将webpack的代码独立打包</p>
<p>视频中的方法是错的，不适用与webpack4</p>
<p>使用这个loader报错:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123; &#x2F;&#x2F; 将js语法从es6转换为浏览器兼容类型</span><br><span class="line">              test: &#x2F;\.js$&#x2F;,</span><br><span class="line">              loader: &#39;babel-loader&#39;,</span><br><span class="line">              &#x2F;&#x2F; node_modules已经编译过了不用重新编译</span><br><span class="line">              exclude: &#x2F;node_modules&#x2F;</span><br><span class="line">          &#125;,</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">ERROR in .&#x2F;src&#x2F;main.js</span><br><span class="line">Module build failed (from .&#x2F;node_modules&#x2F;babel-loader&#x2F;lib&#x2F;index.js):</span><br><span class="line">TypeError: Cannot read property &#39;bindings&#39; of null</span><br><span class="line">    at Scope.moveBindingTo (E:\javaweb\webstrom\todo\node_modules\@babel\traverse\lib\scope\index.js:830:13)</span><br><span class="line">    at BlockScoping.updateScopeInfo (E:\javaweb\webstrom\todo\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:364:17)</span><br><span class="line">    at BlockScoping.run (E:\javaweb\webstrom\todo\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:330:12)</span><br><span class="line">    at PluginPass.BlockStatementSwitchStatementProgram (E:\javaweb\webstrom\todo\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:70:24)</span><br><span class="line">    at newFn (E:\javaweb\webstrom\todo\node_modules\@babel\traverse\lib\visitors.js:179:21)</span><br><span class="line">    at NodePath._call (E:\javaweb\webstrom\todo\node_modules\@babel\traverse\lib\path\context.js:55:20)</span><br><span class="line">    at NodePath.call (E:\javaweb\webstrom\todo\node_modules\@babel\traverse\lib\path\context.js:42:17)</span><br><span class="line">    at NodePath.visit (E:\javaweb\webstrom\todo\node_modules\@babel\traverse\lib\path\context.js:90:31)</span><br><span class="line">    at TraversalContext.visitQueue (E:\javaweb\webstrom\todo\node_modules\@babel\traverse\lib\context.js:112:16)</span><br><span class="line">    at TraversalContext.visitSingle (E:\javaweb\webstrom\todo\node_modules\@babel\traverse\lib\context.js:84:19)</span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/Joe-and-Joan/p/10335881.html">解决办法</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/08/07/%E5%89%8D%E7%AB%AF/vue%20+%20webpack%E7%AE%80%E5%8D%95%E5%AD%A6%E4%B9%A0/" data-id="ckdkdagu4000avout41sg36x0" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="./2020/08/07/%E5%89%8D%E7%AB%AF/vue%20%E5%8A%A8%E7%94%BB/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          (no title)
        
      </div>
    </a>
  
  
    <a href="./2020/08/07/%E7%90%86%E8%AE%BA/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E5%AD%A6%E4%B9%A0(UML%E7%9A%84%E5%AD%A6%E4%B9%A0)/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title"></div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="./archives/2020/08/">August 2020</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E9%93%BE%E8%A1%A8/">(no title)</a>
          </li>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E6%A0%88%E4%B8%8E%E9%98%9F%E5%88%97/">(no title)</a>
          </li>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E6%95%B0%E7%BB%84/">(no title)</a>
          </li>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/">(no title)</a>
          </li>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/SpringBoot%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">(no title)</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 xiaxuchen<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="./" class="mobile-nav-link">Home</a>
  
    <a href="./archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="./fancybox/jquery.fancybox.css">

  
<script src="./fancybox/jquery.fancybox.pack.js"></script>




<script src="./js/script.js"></script>




  </div>
</body>
</html>